<template>
    <div class="app-container">

        <!-- 
            单向绑定            v-bind: 简写 :
            双向绑定            v-model
            遍历                v-for
            绑定事件            v-on: 简写 @
            条件渲染(隐藏展示)   v-show
            条件渲染            v-if v-else-if v-else

            替换文本            v-text
            替换可识别HTML      v-html(不建议使用安全问题)     
            
            只渲染一次          v-once

        -->

        <a @click.prevent="阻止跳转" :href="bdURL">百度一下</a><br><br>
        <!-- <a @click.prevent="阻止跳转" v-bind:href="bdURL">百度一下</a> -->


        <input type="text" placeholder="双向绑定" v-model="inputValue" />

        <div v-text="inputValue"> </div>

        <div v-once v-html="inputValue"> </div>

        <h1> big <span v-big-number="age"></span> </h1>
      

        <input v-hello-world="age" v-model="age"/>

        <button @click="age++">age++</button>








    </div>
</template>

<script>
export default {
    name: 'HelloDirective',
    data() {
        return {
            bdURL: 'https://www.baidu.com',
            inputValue: '<h1>hello</h1>',
            age: 1
        }
    },
    directives: {
        helloWorld: {
            bind(el, binding) {
                el.focus
                console.log('一上来绑定成功时')
                el.innerText = '一上来绑定成功时' + binding.value
            },
            update(el, binding) {
                el.innerText = '模板结构重新解析时' + binding.value
            },
            inserted(el, binding) {
                console.log('插入时')
                el.innerText = '插入时' + binding.value
                el.focus
            },

        }
    }

}
</script>

<style></style>